<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        list-style: none;
      }

      .box {
        margin: 50px auto;
        width: 600px;
        position: relative;
        text-align: center;
      }

      ul {
        width: 80%;
        padding: 2px;
        min-height: 300px;
        overflow-y: auto;
        border: 2px solid #666;
        border-radius: 2px;
        text-align: center;
      }

      li {
        padding: 0 8px;
        margin: 2px;
        background: #ccc;
        float: left;
        line-height: 30px;
        height: 30px;
        border-radius: 10px;
        clear: both;
      }

      .my-msg {
        float: right;
        background: #58bc58;
        color: #fff;
      }

      .text {
        margin: 5px;
        width: 40%;
        min-height: 30px;
      }

      .status {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        color: #555;
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <ul>
        <b>聊天AI</b>
        <br />
        <hr />
        <br />
      </ul>

      <from>
        <input type="text" class="text" />
        <input type="submit" value="发送" class="button" id="auto"" />
      </from>
      <br /><br />
      <div class="status">对方正在输入....</div>
    </div>
    <script>
      oBtn = document.querySelector(".button");
      oStatus = document.querySelector(".status");
      oText = document.querySelector(".text");
      oUl = document.querySelector("ul");
      document.onkeydown = function (e) {
        if (!e) e = window.event; //火狐中是 window.event
        if ((e.keyCode || e.which) == 13) {
          document.getElementById("auto").click();
        }
      };
      oBtn.onclick = function () {
        var text = oText.value;
        console.log(text);
        oText.value = ""; //清空输入框,不能用text
        var oLi = document.createElement("li");
        oLi.innerText = text;
        console.log(oLi.innerText);

        oLi.classList.add("my-msg");
        oUl.append(oLi);
        oStatus.style.display = "block";
        var q = [
          "你好！",
          "你好",
          "你多大了",
          "今天心情怎么样",
          "我好伤心啊",
          "你是男是女",
        ];
        var a = [
          "雷猴！消息最好不带标点哦！",
          [
            "又是一天好心情",
            "你好鸭",
            "Hi!我是AI小爆！你可以跟我聊聊天、问问题哦！",
          ],
          "我是AI机器人，但我也十分年轻，是小哥哥小姐姐哦",
          "小爆和你一样，心情一直很好呢",
          "别难过了，看！窗外的景色，多美啊！",
          "和你的性别恰恰相反哦",
        ];

        var empty = [
          "机智的我，竟然不明白你的话……",
          "听了你的话，小爆甘拜下风",
          "？？？",
          "看来我得回家修炼了呢",
          "换句话试试？",
          "发送给我的消息，最好不要带标点哦",
          "我累了，等会儿再聊吧",
          "小爆随时在线哦！",
          "放松一下眼睛吧",
        ];
        var index = q.indexOf(text);
        var responseText =
          index == -1
            ? empty[getNumber(0, empty.length - 1)]
            : !Array.isArray(a[index])
            ? a[index]
            : a[index][getNumber(0, a[index].length - 1)];
        var oLiB = document.createElement("li");
        oLiB.innerText = responseText;
        setTimeout(() => {
          oUl.appendChild(oLiB);
          oStatus.style.display = "none";
          console.log("1秒");
          console.log("最大时间和最小时间：", this.hhh);
        }, getNumber(300, 3000));

        function getNumber(min, max) {
          return (hhh = parseInt(Math.random() * (max - min + 1) + min));
        }
      };
    </script>
  </body>
</html>
